<template>
  <view class="search-page">
    <view class="search-sticky">
      <view class="search-header">
        <view class="search-top"> 
          <view>请选择之前的酒体订单</view>
          <view>我的酒体库</view>
        </view>
      </view>
      <view class="search-header">
        <view class="search-input-wrap">
          <image
            src="/static/SearchIcon.png"
            mode="widthFix"
            class="search-icon"
            @click="handleSearch"
          >
          </image>
          <input
            v-model="query.alcohol"
            class="search-input"
            placeholder=""
            @keyup.enter.capture="handleSearch"
          />
          <view class="clear-icon" @click="handleSearch"> 搜索 </view>
        </view>
      </view>
    </view>

    <view class="medicine-list">
      <view
        v-for="item in dataList"
        :key="item.order_id"
        @click="handleSelect(item)"
        class="list-item"
        :class="{ active: item.order_id == chooseOrder.order_id }"
      >
        <view class="item-cell">
          <view class="item-cell-left">订单号：</view>
          <view class="item-cell-right"> {{ item.order_no || "" }} </view>
        </view>
        <view v-if="item.alcohol_type.includes('1')" class="item-cell">
          <view class="item-cell-left">类别：</view>
          <view class="item-cell-right"> {{ item.alcohol_type_name || "" }} </view>
        </view>
        <view v-if="item.alcohol_type.includes('1')" class="item-cell">
          <view class="item-cell-left"> 酒体： </view>
          <view class="item-cell-right">
            <view v-for="(i, k) in item.order_alcohol" :key="k">
              {{ i.alcohol_body_name }}
            </view>
          </view>
        </view>
        <view
          v-if="item.alcohol_type.includes('3') || item.alcohol_type.includes('4')"
          class="item-cell"
        >
          <view class="item-cell-left"> 商品名称： </view>
          <view class="item-cell-right">
            <view v-for="(i, k) in item.order_goods" :key="k">
              {{ i.goods_name }}
            </view>
          </view>
        </view>
        <view v-if="item.alcohol_type.includes('2')" class="item-cell">
          <view class="item-cell-left">专家名称：</view>
          <view class="item-cell-right">
            {{ item.order_bartender?.name || "" }}
          </view>
        </view>
        <view class="item-cell">
          <view class="item-cell-left">酒体来源：</view>
          <view class="item-cell-right">
            <view v-for="(i, k) in item.alcohol_type" :key="k">
              {{ alcoholTypes[i] || "" }}
            </view>
          </view>
        </view>
        <view class="item-cell">
          <view class="item-cell-left">调酒容量：</view>
          <view class="item-cell-right">{{ item.order_sku || "-" }}ml</view>
        </view>
        <view class="item-line"></view>
        <view class="item-bottom">
          <view class="item-bottom-left">{{ item.order_status_data.name || "" }}</view>
          <view class="item-bottom-right">
            实付款:
            <text class="text-[29rpx]">￥</text>
            <text
              v-if="
                parseFloat(item.final_money || '00') && !['6', '7'].includes(item.status)
              "
            >
              {{ parseFloat(item.goods_money || "00").toFixed(2) }}
            </text>
            <text v-else>
              {{
                (
                  parseFloat(item.order_money || "00") -
                  parseFloat(item.delivery_money || "00") -
                  parseFloat(item.cup_money || "00")
                ).toFixed(2)
              }}
            </text>
            <text
              v-if="
                parseFloat(item.final_money || '00') && !['6', '7'].includes(item.status)
              "
              class="text-[28rpx]"
              >+</text
            >
            <text
              v-if="
                parseFloat(item.final_money || '00') && !['6', '7'].includes(item.status)
              "
              class="text-[29rpx]"
              >￥
            </text>
            <text
              v-if="
                parseFloat(item.final_money || '00') && !['6', '7'].includes(item.status)
              "
            >
              {{ parseFloat(item.final_money || "00").toFixed(2) }}
            </text>
          </view>
        </view>
      </view>
      <up-loadmore v-if="dataList.length > 0" :status="status" />
    </view>
    <up-empty v-if="dataList.length == 0" text="暂无订单" />
    <view class="back-arm">
      <view v-if="chooseOrder.order_id" class="back-Right" @click="comfirm">
        <text>选择</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { redirect } from "@/utils/common";
import { getAlcoholOrderList } from "@/addon/shop/api/select";

const query = ref({
  alcohol: "",
  page: 1,
  limit: 10,
});
const dataList = ref([]);
const total = ref(0);
const alcoholTypes = ref({
  0: "商城订单",
  1: "勾调一杯乐",
  2: "国匠一杯乐",
  3: "大师基础配方",
  4: "标准酒体",
  5: "已有酒体（勾调一杯乐）",
  6: "已有酒体（国匠一杯乐）",
  7: "已有酒体（大师基础配方）",
  8: "已有酒体（标准酒体）",
});
const chooseOrder = ref({}); // 选择的订单
const status = ref("loadmore");
const type = ref("");

onLoad((e) => {
  type.value = e.type;
  getList();
});

// 获取订单列表
const getList = () => {
  status.value = "loading";
  getAlcoholOrderList(query.value)
    .then((res) => {
      let data = res.data.data;
      data.forEach((i) => {
        let list = i.order_alcohol || i.order_goods || [];
        if (['3', '4', '7', '8'].includes(i.alcohol_type) && i.order_goods) {
          i.order_sku = i.order_goods[0]?.sku_name
        }
        i.alcohol_type = i.alcohol_type.split(",");
        i.alcohol_type_name = list.map((j) => j.alcohol_type_name);
        i.alcohol_type_name = Array.from(new Set(i.alcohol_type_name));
        i.alcohol_type_name = i.alcohol_type_name.join("、");
      });
      dataList.value = query.value.page == 1 ? data : dataList.value.concat(data);
      total.value = res.data.total || 0;
    })
    .finally(() => {
      status.value = dataList.value.length >= total.value ? "nomore" : "loadmore";
      uni.stopPullDownRefresh();
    });
};

// 处理搜索
const handleSearch = () => {
  chooseOrder.value = {};
  query.value.page = 1;
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300,
  });
  getList();
};

// 选择订单
const handleSelect = (item) => {
  chooseOrder.value = item;
};

// 下一步
const comfirm = () => {
  if (type.value == "design") {
    uni.$emit("chooseOrder", chooseOrder.value);
    uni.navigateBack({ delta: 1 });
  } else {
    redirect({
      url: "/addon/shop/pages/select/package",
      param: { orderId: chooseOrder.value.order_id },
    });
  }
};

onReachBottom(() => {
  if (dataList.value.length < total.value) {
    query.value.page++;
    getList();
  }
});

onPullDownRefresh(() => {
  chooseOrder.value = {};
  query.value.page = 1;
  getList();
});
</script>

<style lang="scss" scoped>
.search-page {
  min-height: 100vh;
  background: #f7f8fa;

  .search-sticky {
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    background: #f7f8fa;
    padding: 16rpx 0;
  }

  .search-header {
    display: flex;
    width: 89%;
    margin: 0 auto;
    align-items: center;
    padding: 16rpx 20rpx 16rpx;
    background: #fff;
    border-bottom: 1rpx solid #f5f5f5;
    border-radius: 20rpx;
    margin-top: 20rpx;

    .search-top {
      font-size: 32rpx;
      margin: 0 auto;
      text-align: center;
      > view:first-child {
        font-weight: 600;
      }
    }

    .search-input-wrap {
      flex: 1;
      height: 64rpx;
      background: #f7f7f7;
      border-radius: 32rpx;
      display: flex;
      align-items: center;
      padding: 0 24rpx;

      .search-icon {
        width: 40rpx;
        height: 40rpx;
      }

      .search-input {
        flex: 1;
        height: 100%;
        font-size: 26rpx;
      }

      .clear-icon {
        width: 66rpx;
        height: 44rpx;
        color: #86909c;
        font-size: 26rpx;
      }
    }
  }
  .medicine-list {
    padding: 10rpx 10rpx 140rpx;
    .list-item {
      width: 88%;
      display: flex;
      padding: 18rpx 30rpx 10rpx;
      border-radius: 16rpx;
      flex-direction: column;
      margin: 14rpx 14rpx 22rpx;
      background: #fff;
      border: 2rpx solid transparent;
      transition: all 0.3s;

      .item-cell {
        font-size: 28rpx;
        color: #3d3d3d;
        display: flex;
        justify-content: flex-start;

        .item-cell-left {
          width: 22%;
        }
      }

      .item-line {
        width: 100%;
        height: 2rpx;
        margin-top: 6rpx;
        background-color: #e7e7e7;
      }

      .item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #3d3d3d;
        margin: 6rpx 0 0;

        .item-bottom-right {
          text {
            font-size: 38rpx;
            font-weight: 600;
            color: #f00;
          }
        }
      }
    }

    .active {
      border: 2rpx solid #f00;
      background: rgba(253, 240, 240, 0.5);
    }
  }
  .back-arm {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 20rpx 40rpx;
    background: #fff;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    height: 86rpx;
    width: 100%;

    .back-Right {
      width: 27%;
      background: #fff;
      text-align: center;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 76rpx;
      line-height: 76rpx;
      color: #fff;
      margin-left: 470rpx;
      background: linear-gradient(to right, #ff1919, #ff4000);
    }
  }
}
</style>
